<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head th:replace="common::commonHeader('人民币结售汇')">
</head>
<body>
<nav th:replace="common::commonNav"></nav>

<main role="main" class="container">
    <div class="col-10 m-auto">
        <div class="card">
            <div class="card-header bg-info">
                <p class="m-auto text-center text-light font-weight-bold">人民币结售汇</p>
            </div>
            <div class="card-body m-auto">
                <div th:if="${rmbRate['code'] ne 200}" class="alert alert-danger" role="alert">
                    <p>错误码：<span th:text="${rmbRate.get('code')}"></span></p>
                    <p>错误信息：<span th:text="${rmbRate.get('message')}"></span></p>
                </div>
                <div class="table-responsive" th:if="${rmbRate['code'] eq 200}">
                    <table class="table table-hover">
                        <thead class="thead-default">
                        <tr>
                            <th>货币名称</th>
                            <th>标准符号</th>
                            <th>发布日期</th>
                            <th>发布时间</th>
                            <th>交易单位</th>
                            <th>现汇买入价</th>
                            <th>现汇卖出价</th>
                            <th>中间价</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody id="tbody">
                        <tr th:each="data : ${rmbRate.get('data')}">
                            <td th:text="${data.value.currencyName}"></td>
                            <td th:text="${data.value.currencyCode}"></td>
                            <td th:text="${data.value.date}"></td>
                            <td th:text="${data.value.time}"></td>
                            <td>100</td>
                            <td th:text="${data.value.fbuyPri}"></td>
                            <td th:text="${data.value.fsellPri}"></td>
                            <td th:text="${data.value.bankConversionPri}"></td>
                            <td>
                                <button onclick="show(this)" th:id="${data.value.currencyCode}" type="button"
                                        class="btn btn-success btn-sm" data-toggle="modal" data-target="#transaction">
                                    兑换
                                </button>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- 人民币结售汇弹出框 -->
    <div class="modal fade" id="transaction" tabindex="-1" role="dialog" aria-labelledby="transactionLabel"
         aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="transactionLabel">人民币结售汇</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>

                <div class="modal-body m-auto">
                    <div class="form-group row">
                        <label for="bankcardID" class="col-xs-3 col-form-label mr-2">支付卡号：</label>
                        <div class="col-xs-9">
                            <input type="text" class="form-control" th:value="${bankcardID}" id="bankcardID"
                                   name="bankcardID" readonly/>
                        </div>
                    </div>

                    <div class="form-group row">
                        <label for="currency" class="col-xs-3 col-form-label mr-2">交易货币：</label>
                        <div class="col-xs-9">
                            <input type="text" class="form-control" id="currency" name="currency" readonly/>
                        </div>
                    </div>

                    <div class="form-group row">
                        <label for="money" class="col-xs-3 col-form-label mr-2">兑换金额：</label>
                        <div class="col-xs-9">
                            <input type="number" class="form-control" id="money" name="money" required/>
                        </div>
                    </div>

                    <div class="form-group row">
                        <label for="type"
                               class="col-xs-3 col-form-label mr-2">操作类型：</label>
                        <div class="col-xs-9">
                            <select onchange="showRate()" class="form-control" id="type" name="type">
                                <option value="true">结汇</option>
                                <option value="false">售汇</option>
                            </select>
                        </div>
                    </div>

                    <div class="form-group row">
                        <label for="rate" class="col-xs-3 col-form-label mr-2">当前价格：</label>
                        <div class="col-xs-9">
                            <input type="text" class="form-control" id="rate" name="rate" readonly>
                        </div>
                    </div>

                    <div class="form-group row">
                        <label for="password" class="col-xs-3 col-form-label mr-2">支付密码：</label>
                        <div class="col-xs-9">
                            <input type="password" class="form-control" id="password" name="password" required/>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" onclick="settlement()">提交
                    </button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                </div>
            </div>
        </div>
    </div>
</main>
<script type="text/javascript" th:src="@{~/js/sockjs.min.js}"></script>
<script type="text/javascript" th:src="@{~/js/stomp.min.js}"></script>
<script type="text/javascript" th:inline="javascript">
    var cnyData = [[${rmbRate.get('data')}]];
    var currency;
    var buyPic;
    var sellPic;

    function show(obj) {
        currency = $(obj).attr('id');
        buyPic = cnyData[currency].fbuyPri;
        sellPic = cnyData[currency].fsellPri;
        $('#currency').val(currency);
        $('#rate').val(buyPic);
    }

    function showRate() {
        //获取被选中的option标签
        var type = $('select option:selected').val();
        if (type === 'true') {
            $('#rate').val(buyPic);
        } else {
            $('#rate').val(sellPic);
        }
    }

    function settlement() {
        var bankcardID = $('#bankcardID').val();
        var currency = $('#currency').val();
        var money = $('#money').val();
        var type = $('#type').val();
        var password = $('#password').val();
        var rate = $('#rate').val();
        $.ajax({
            type: 'post',
            url: '/fx/cny/transaction/' + bankcardID + '/' + currency + '/' + money + '/' + type + '/' + password + '/' + rate,
            contentType: 'application/json;charset=UTF-8',
            dataType: 'text',
            success: function (data) {
                $('#transaction').modal('hide');
                alert(data);
            },
            error: function (err) {
                console.log('ajax错误码:' + err.status);
            }
        });
    }

    // 连接服务器端点
    var noticeSocket = function () {
        // 创建stomp客户端
        var s = new SockJS('/socket');
        // 创建stomp客户端
        var stompClient = Stomp.over(s);
        stompClient.connect({}, function () {
            // 订阅消息地址
            stompClient.subscribe('/stomp/sub/cnyRate', function (data) {
                var cnyRate = JSON.parse(data.body);
                var dataMap = cnyRate['data'];
                cnyData = dataMap;
                // 清空表格内容
                $('#tbody').empty();
                // 将数据重新填入表格
                for (var key in dataMap) {
                    var row = buildRow(dataMap[key]);
                    console.log(row);
                    document.getElementById("tbody").appendChild(row);
                }
            });
        });
    };

    noticeSocket();

    function buildRow(data) {
        var row = document.createElement('tr');

        var currencyNameRow = document.createElement('td');
        currencyNameRow.innerHTML = data['currencyName'];
        row.appendChild(currencyNameRow);

        var currencyCodeRow = document.createElement('td');
        currencyCodeRow.innerHTML = data['currencyCode'];
        row.appendChild(currencyCodeRow);

        var dateRow = document.createElement('td');
        dateRow.innerHTML = data['date'];
        row.appendChild(dateRow);

        var timeRow = document.createElement('td');
        timeRow.innerHTML = data['time'];
        row.appendChild(timeRow);

        var unitRow = document.createElement('td');
        unitRow.innerHTML = 100;
        row.appendChild(unitRow);

        var buyRow = document.createElement('td');
        buyRow.innerHTML = data['fbuyPri'];
        row.appendChild(buyRow);

        var sellRow = document.createElement('td');
        sellRow.innerHTML = data['fsellPri'];
        row.appendChild(sellRow);

        var conversionRow = document.createElement('td');
        conversionRow.innerHTML = data['bankConversionPri'];
        row.appendChild(conversionRow);

        var buttonRow = document.createElement('td');
        row.appendChild(buttonRow);
        var opButton = document.createElement('input');
        opButton.setAttribute('type', 'button');
        opButton.setAttribute('class', 'btn btn-success btn-sm');
        opButton.setAttribute('id', data['currencyCode']);
        opButton.setAttribute('value', '兑换');
        opButton.setAttribute('data-toggle', 'modal');
        opButton.setAttribute('data-target', '#transaction');
        opButton.onclick = function () {
            currency = $(this).attr('id');
            buyPic = cnyData[currency].fbuyPri;
            sellPic = cnyData[currency].fsellPri;
            $('#currency').val(currency);
            $('#rate').val(buyPic);
        };
        buttonRow.appendChild(opButton);
        return row;
    }
</script>
</body>
</html>